<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>属性的绑定和属性的简写</title>
		<script type="text/javascript" src="../js/framework/vue.js" ></script>
		<script>
			window.onload = function () {
				//配置是否允许vue-devtools检查代码，方便调试，生产环境中需要设置为false
				Vue.config.devtools = false;
				//阻止Vue启动的时候产生提示
				Vue.config.productionTip = false; 
				
				new Vue({
				  el: '#app',  //指定关联的元素
				  data: {  //存储数据
				    bb: 'aa',
				    dd: 'cc',
				    flag: true,
				    num:3,
				    xx: {
				    		color: 'blue',
				    		fontSize: '30px'
				    },
				    yy: {
				    		backgroundColor: 'green'
				    }
				  },
				  methods: {
				  	
				  }
				});
			}
		</script>
		
		<style>
			.aa {
				color: red;
				font-size: 100px;
			}
			.cc {
				background-color: lightblue;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!--<p class="aa">Vue.js</p>--> <!--可以直接访问-->
			<!--<p :class="aa">Vue.js</p>--> <!--不可以直接访问，Vue的属性绑定时候，不能直接使用css样式-->
					
			<!--方式一 通过变量的方式-->
			<p :class="bb">Vue.js</p>
			
			<!--方式二 通过数组的方式指定多个样式-->
			<p :class="[bb,dd]">Vue.js</p>
			
			<!--方式三 通过json形式-->
			<!--在{}内部，aa为true表示使用aa这个样式，bb表示不适用bb这个样式-->
			<!--在实际项目中，可以将true和false设为变量-->
			<!--<p :class="{aa:true,cc:flase}">Vue.js</p>-->
			<p :class="{aa:num>0}">Vue.js</p>
			
			<!--style属性-->
			<p :style="xx">Vue.js</p>
			<p :style="[xx,yy]">Vue.js</p>
		</div>
	</body>
</html>
